<template>
  <div class="application-list-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">我的申请</h1>
    </div>

    <!-- 搜索栏 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-6 mb-6">
      <div class="flex items-center justify-between mb-4">
        <el-input
          v-model="searchText"
          placeholder="搜索用户名称/所属单位/电话号码"
          class="w-96"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search text-neutral-400"></i>
          </template>
        </el-input>

        <el-button color="#1890ff" plain class="!border-primary-500 !text-primary-500 hover:!bg-primary-50">
          <i class="fas fa-user mr-2"></i>个人空间
        </el-button>
      </div>

      <!-- 状态筛选按钮 -->
      <div class="flex gap-3">
        <el-button 
          :type="statusFilter === '待审批' ? 'primary' : ''" 
          @click="statusFilter = '待审批'"
        >
          待审批
        </el-button>
        <el-button 
          :type="statusFilter === '审批通过' ? 'primary' : ''" 
          @click="statusFilter = '审批通过'"
        >
          审批通过
        </el-button>
        <el-button 
          :type="statusFilter === '审批驳回' ? 'primary' : ''" 
          @click="statusFilter = '审批驳回'"
        >
          审批驳回
        </el-button>
        <el-button 
          :type="statusFilter === '已激活' ? 'primary' : ''" 
          @click="statusFilter = '已激活'"
        >
          已激活
        </el-button>
        <el-button 
          :type="statusFilter === '待激活' ? 'primary' : ''" 
          @click="statusFilter = '待激活'"
        >
          待激活
        </el-button>
      </div>
    </div>

    <!-- 申请列表表格 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm overflow-hidden">
      <el-table
        :data="filteredApplications"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '500' }"
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="permissionId" label="许可证编号" width="140" align="center" />
        <el-table-column prop="event" label="申请事件" width="140" />
        <el-table-column prop="status" label="审批状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deviceId" label="设备标识" width="120" />
        <el-table-column prop="department" label="所属单位" width="120" />
        <el-table-column prop="applyTime" label="申请时间" width="180" />
        <el-table-column prop="expireTime" label="到期时间" width="180" />
        <el-table-column label="操作" width="360" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleExport(row)">
              许可证导出
            </el-button>
            <el-button type="success" size="small" @click="handleContinue(row)">
              申请续期
            </el-button>
            <el-button type="danger" size="small" @click="handleRevoke(row)">
              申请撤销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const searchText = ref('')
const statusFilter = ref('待审批')

// 模拟申请数据
const applications = ref([
  { id: 1, permissionId: 123, event: '在线激活', status: '审批通过', deviceId: 'xxx', department: 'jrlc', applyTime: '2023-10-05 14:32:35', expireTime: '2023-10-05 14:32:35' },
  { id: 2, permissionId: 123, event: '离线激活', status: '待审批', deviceId: 'xxx', department: 'jrlc', applyTime: '2023-10-05 14:32:35', expireTime: '2023-10-05 14:32:35' },
  { id: 3, permissionId: 123, event: '设备迁移', status: '待审批', deviceId: 'xxx', department: 'jrlc', applyTime: '2023-10-05 14:32:35', expireTime: '2023-10-05 14:32:35' }
])

const filteredApplications = computed(() => {
  let result = applications.value
  if (statusFilter.value) {
    result = result.filter(app => app.status === statusFilter.value)
  }
  if (searchText.value) {
    result = result.filter(app => 
      app.department.includes(searchText.value)
    )
  }
  return result
})

const getStatusType = (status) => {
  const statusTypes = {
    '待审批': 'warning',
    '审批通过': 'success',
    '审批驳回': 'danger',
    '已激活': 'success',
    '待激活': 'info'
  }
  return statusTypes[status] || ''
}

const handleExport = (row) => {
  ElMessage.success('许可证导出成功')
}

const handleContinue = (row) => {
  ElMessage.info('申请续期')
}

const handleRevoke = (row) => {
  ElMessage.warning('申请撤销')
}
</script>

<style scoped>
.application-list-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

